<template>
  <section class="v-category" :class="{'sticky': sticky}" :style="{'margin-left': margins, 'margin-right': margins, 'margin-top': top,}">
    <div class="study-tool">
      <div class="top-blue">
        <div class="top-search">
          <div class="s-input">
            <input v-model="search" class="needsclick" type="text" placeholder="请输入名称搜索">
          </div>
          <div
            class="s-btn"
            @click="startSearch"
          >
            搜索
          </div>
        </div>
      </div>
    </div>
    <van-tabs
      v-model="id"
      :background="bgcolor"
      :title-inactive-color="textcolor"
      :title-active-color="currentcolor"
      :style="{'height': height}"
      :color="`${currentcolor ? currentcolor : ''}`"
      :ellipsis="false"
      @click="handleChange"
    >
      <van-tab v-for="(item,index) in list" :key="index" :style="{'color': textcolor}" :title="item.classifyName" :name="item.id" />
    </van-tabs>

  </section>
</template>
<script>
import mixins from './../mixins'
export default {
  name: 'VCategory',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    varInfo: {
      type: Object,
      default: () => { }
    },
    relation: {
      type: [Object, undefined],
      default: () => {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }

  },
  data() {
    return {
      id: '',
      list: [],
      newsType: '',
      search: ''
    }
  },
  computed: {
    sticky() {
      return this.option.sticky
    },
    height() {
      return this.px2rem(this.option.height || 88)
    },
    bgcolor() {
      return this.option.bgcolor || '#fff'
    },
    textcolor() {
      return this.option.textcolor || '#333'
    },
    currentcolor() {
      return this.option.currentcolor || ''
    }
  },
  created() {
    this.init()
  },
  methods: {
    startSearch() {
      this.dispatch_event('filed-value-change', this)
    },
    async init() {
      if (this.isInitData) {
        await this.initData()
      } else {
        for (let i = 1; i < 4; i++) {
          this.list.push({
            classifyName: '分类' + i,
            id: i
          })
        }
      }
    },
    setData(result) {
      this.list = result?.classifyList?.data
    },

    getValue() {
      return this.id
    },

    setValue(k) {
      this.$set(this, 'id', k)
    },

    check() {
      return true
    },

    handleChange(e) {
      // this.dispatch_event('filed-value-change', e)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
.v-category {
  &.sticky {
    position: sticky;
    top: 0;
  }
  .study-tool {
    height: rem(88);
    display: flex;
    align-items: center;
    @include bg-color($mainColor);
    .top-blue {
      width: 100%;
      .top-search {
        padding: 0 rem(30);
        padding-bottom: rem(12);
        height: rem(68);
        display: flex;
        align-items: center;
        .s-input {
          width: 0;
          height: 100%;
          flex: 1;
          input {
            width: 100%;
            height: 100%;
            border-radius: rem(32);
            border: none;
            background-color: #fff;
            opacity: 0.6;
            font-size: rem(28);
            font-family: PingFang SC Regular, PingFang SC Regular-Regular;
            font-weight: 400;
            text-align: left;
            padding: 0 rem(30);
          }
          input::-webkit-input-placeholder {
            opacity: 0.6;
            font-size: rem(28);
            font-family: PingFang SC Regular, PingFang SC Regular-Regular;
            font-weight: 400;
            text-align: left;
          }
        }
        .s-btn {
          flex: 0 0 auto;
          height: 100%;
          margin-left: rem(29);
          width: rem(62);
          font-size: rem(28);
          font-family: PingFang SC Regular, PingFang SC Regular-Regular;
          font-weight: 400;
          text-align: left;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .top-tab {
        .van-tabs {
          height: rem(88);
          .van-tab--active {
            font-weight: bold;
          }
        }
        padding-bottom: rem(13);
      }
    }
  }
  /deep/ {
    .van-tabs {
      .van-tab {
        font-size: rem(30);
        flex: 1 0 auto;
        padding: 0 rem(28);
        flex-basis: auto !important;
      }

      .van-hairline--top-bottom::after,
      .van-hairline-unset--top-bottom::after {
        border: none;
      }

      .van-tabs__line {
        width: rem(40) !important;
        height: rem(6);
        position: absolute;
        left: 0;
        z-index: 1;
        border-radius: rem(6);
      }
    }
  }
}
</style>
